<script setup>
  import { ref } from 'vue'
  defineProps({
    title: ''
  })

  const flag = ref(false)

  function toggle() {
    flag.value = !flag.value
  }
</script>

<template>
  <div class="overflow-auto rounded">
    <div class="flex items-center text-indigo-500 bg-white bg-indigo-100">
      <div class="flex-1 p-2">
        {{title}}
      </div>
      <span class="p-2 cursor-pointer hover:bg-indigo-200" @click="toggle">
        {{flag ? '收起 ↑' : '展开 ↓'}}
      </span>
    </div>
    <div class="" v-if="flag">
      <slot />
    </div>
  </div>
</template>